<template>
	<div class="forGotPass">
		<div class="layout">
			<p class="title">用户更换密码</p>
			<p class="msg">很高兴您将成为商城的会员（修改只需一步）</p>
			<myinput :type="'text'" :icon="'iconshouji54'" v-model="phone" :value="phone"
					 :placeholder="'手机号码'" :flag1="true"></myinput>
			<myinput :type="'password'" v-model="password" :value="password" :placeholder="'密码'"></myinput>
			<myinput :type="'password'" v-model="confirmPass" :value="confirmPass" :placeholder="'确认密码'"></myinput>
			<myinput :cla1="cla1" :type="'text'" v-model="test" :value="test"></myinput>
			<myinput :cla1="cla1" :type="'text'" v-model="test1" :value="test1"></myinput>
			<button class="hq">获取验证码</button>
			<mybutton class="myBtn" :value="value" :cls="cls" :phone="phone" :password="password"></mybutton>
			<p class="fh" @click="toHome">放弃修改？ 返回主页</p>
		</div>
	</div>
</template>

<script>
import myinput from '@/components/my/myinput.vue';
import mybutton from '@/components/my/mybutton.vue';

export default {
	name: 'forGotPass',
	components: {myinput, mybutton},
	data() {
		return {
			phone: '',
			password: '',
			confirmPass: '',
			value: '修改密码',
			test: '',
			test1: '',
			cls: 'setBtn',
			cla1: 'cla1'
		};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {

	},
	methods: {
		toHome() {
			this.$router.push('/home/index');
		}
	}
};
</script>

<style lang="scss" scoped>
.forGotPass {
  .layout {
    width: 70%;
    padding: 0 36px;
    margin: 20px auto 0;
    height: 92vh;
    border: 1px solid #F5F5F5;

    .title {
      color: #333;
      font-size: 1.4rem;
      margin: 36px 0;
    }

    .msg {
      font-size: 0.9rem;
      color: #909090;
      margin-bottom: 1rem;
    }

    .fh {
      color: #549ff9;
      font-size: 0.9rem;
      text-align: center;
      padding-top: 12px;
    }

    .hq {
      background-color: #F5F5F5;
      border-left: 1px solid #E1E1E1;
      height: 3rem;
      width: 6.6rem;
      position: fixed;
      right: 4.9rem;
      bottom: 11.1rem;
      border-bottom-right-radius: 6px;
      border-top-right-radius: 6px;
    }
  }
}
</style>